<template>
  <div class="page-file">
    <div class="page-file-box">
      <!-- <Menu mode="horizontal" theme="light" active-name="file" class="menu-list">
        <MenuItem name="file">
        文件列表
      </MenuItem>
      </Menu> -->
      <file-list @triggerUp="startUpload"></file-list>
    </div>
  </div>
</template>

<script>
import FileList from './FileList'
import {
  createNamespacedHelpers
} from 'vuex'
import $http from 'axios'
import httpConfig from 'http/config'
import {uploadStatus} from 'assets/scripts/code'
const {
  mapState,
  mapMutations
} = createNamespacedHelpers('files')

export default {
  data () {
    return {
      localErrorList: [],
      doneList: [],
      uplist: [],
      stop: false,
      start: false
    }
  },
  created () {
    this.start = true
  },
  methods: {
    startUpload () {
      // console.log('仓库里的data')
      // console.log(this.uploadData)
      if (this.uploadData.length === 0) {
        this.doneList = []
        this.setlocalListUse([])
        this.$Message.success('上传完成');
        return false
      }
      let length = this.uploadData.length // 拖动选中的的列表
      let num = length > 5 ? 5 : length
      let tempList = [...this.uploadData]
      let startIndex = this.localListUse.length
      this.setlocalListUse([...this.localListUse, ...tempList.slice(0, num)])
      // console.log('处理机中的data')
      // console.log(this.localListUse)
      this.setUploadData([...tempList.splice(num)])
      // 第一次置换
      for (let j = 0; j < num; j++) {
        this.handleUpload(this.localListUse[startIndex + j], j + startIndex)
      }
    },
    // 上传文件
    handleUpload (obj, index) {
      this.uplist = [...this.localListUse]// 要对uplist进行修改
      let param = new FormData();
      param.append('isCreateFolder', obj.isCreateFolder);
      param.append('currentDir', obj.currentDir);
      param.append('createFolderName', obj.createFolderName);
      param.append('file', obj.file.file);
      this.uploadHttp(param, index, obj)
    },
    uploadHttp (data, index, obj) {
      const _this = this
      _this.$set(_this.uplist, index, {
        ..._this.uplist[index],
        uploadStatus: uploadStatus.START
      })
      _this.setlocalListUse([..._this.uplist])
      $http({
        url: `${httpConfig.baseURL}/datavolum/localDataUpload`,
        method: 'post',
        headers: {
          'Content-Type': 'multipart/form-data',
          Authorization: localStorage.userToken
        },
        withCredentials: true,
        // 添加上传进度监听事件
        onUploadProgress: e => {
          var completeProgress = ((e.loaded / e.total * 100) | 0);
          _this.$set(_this.uplist, index, {
            ..._this.uplist[index],
            uploadPercentage: completeProgress
          })
          _this.setlocalListUse([..._this.uplist])
        },
        data
      }).then(function (response) {
        if (response.data.retcode === '000000') {
          _this.$set(_this.uplist, index, {
            ..._this.uplist[index],
            uploadStatus: uploadStatus.SUCCESS
          })
          _this.setlocalListUse([..._this.uplist])
        } else {
          _this.localErrorList = [..._this.localErrorList, {
            ..._this.uplist[index],
            uploadStatus: uploadStatus.FAIL
          }]
          _this.$set(_this.uplist, index, {
            ..._this.uplist[index],
            uploadStatus: uploadStatus.FAIL
          })
          _this.setErrorList([..._this.localErrorList])
          _this.$Message.error(_this.uplist[index].name + '上传失败');
        }
        _this.doneList.push(obj)
        if (_this.doneList.length === _this.localListUse.length) {
          _this.startUpload()
        }
      }).catch(function (error) {
        console.log(error)
        _this.$set(_this.uplist, index, {
          ..._this.uplist[index],
          uploadStatus: uploadStatus.FAIL
        })
        _this.setlocalListUse([..._this.uplist])
        _this.doneList.push(obj)

        if (_this.doneList.length === _this.localListUse.length) {
          _this.startUpload()
        }
        _this.localErrorList = [..._this.localErrorList, {
          ..._this.uplist[index],
          uploadStatus: uploadStatus.FAIL
        }]
        _this.setErrorList([..._this.localErrorList])
        _this.$Message.error(_this.uplist[index].name + '上传失败');
      })
    },
    ...mapMutations([
      'setUploadData',
      'setlocalListUse',
      'setErrorList'
    ])
  },
  computed: {
    ...mapState({
      uploadData: state => state.uploadData,
      localListUse: state => state.localListUse,
      errorList: state => state.errorList
    })
  },
  components: {
    FileList
  }
};
</script>

<style rel="stylesheet/less" lang="less" scoped>
.page-file {
    height: 100%;
    min-height: 100%;
    .page-file-box {
        padding: 20px;
    }
    .ivu-menu {
        z-index: 0;
    }
}

.menu-list {
    margin-bottom: 20px;
}
</style>
